import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { DNavBar, DCheckOpinion } from '@/components';
import './index.scss';
import http from '@/api'

export default class MortgageCheckDetail extends Component {
  state = {
    moneyIcon: require('@/assets/images/money_icon.png'),
    fileIcon: require('@/assets/images/file_icon.png'),
    opinions: [{
      name: '已安排进件',
      value: 'success'
    }, {
      name: '不同意进件',
      value: 'fail'
    }],
    detail: {},
    loanInfoList: [],
    otherList: []
  }
  componentDidMount() {
    this.getMortgageDetail()
  }
  getMortgageDetail() {
    http.getMortgageDetail(this.$router.params.id).then((detail) => {
      this.handleLoanInfoList(detail)
      this.handleOtherList(detail)
      this.setState({ detail })
    })
  }
  handleLoanInfoList(detail) {
    const loanInfoListMap = {
      loanPrice: '贷款金额',
      loanRate: '利率',
      loanDate: '贷款期限',
      signBank: '签件银行',
      registrationCity: '上牌地',
      inCondition: '进件条件'
    }

    let loanInfoList = []
    Object.keys(loanInfoListMap).forEach(key => {
      let value = detail[key] || '---'
      if (key === 'loanPrice') value += '万元'
      loanInfoList.push({
        label: loanInfoListMap[key],
        value
      })
    })

    this.setState({ loanInfoList })
  }
  handleOtherList(detail) {
    let otherListMap = {
      entName: '车商名称',
      servicerName: '业务人员',
      orgName: '中介机构/个人'
    }
    let otherList = []
    Object.keys(otherListMap).forEach(key => {
      otherList.push({
        label: otherListMap[key],
        value: detail[key] || '---'
      })
    })
    this.setState({ otherList })
  }
  onConfirm = ({ checkOpinion, explain }) => {
    let params = {
      id: this.state.detail.id,
      status: checkOpinion === 'success' ? 1 : 2,
      remark: explain
    }
    http.updateRegistration(params).then(({ data }) => {
      Taro.showToast({
        title: '提交成功',
        icon: "success"
      })
      setTimeout(() => { Taro.navigateBack() }, 2000)
    })
  }

  render() {
    const { moneyIcon, fileIcon, opinions, detail, loanInfoList, otherList } = this.state;

    return (
      <View className="mortgage-check-detail">
        <DNavBar title="按揭信息审核详情"></DNavBar>

        <View className="info">
          <View className="car_model_name">{detail.carModelName}</View>
          <View className="sub">
            <View className="label">外观颜色：{detail.outColor}</View>
            <View className="value"> 指导价：<Text className="price">{detail.guidePrice}万元</Text></View>
          </View>
          <View className="item">
            <View className="label">客户姓名</View>
            <View className="value">{detail.cusName}</View>
          </View>
          <View className="item">
            <View className="label">联系方式</View>
            <View className="value">{detail.cusMobile}</View>
          </View>

          <View className="title">
            <Image src={moneyIcon} className="title_icon"></Image>
            <Text className="title_text">按揭信息</Text>
          </View>
          {
            loanInfoList.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value">{item.value}</View>
            </View>)
          }


          <View className="title">
            <Image src={fileIcon} className="title_icon"></Image>
            <Text className="title_text">其他信息</Text>
          </View>
          {
            otherList.map(item => <View className="item">
              <View className="label">{item.label}</View>
              <View className="value">{item.value}</View>
            </View>)
          }
        </View>

        {
          (detail.status == 1 || detail.status == 2) && <View className="check-detail">
            <View className="check-detail__title">审核</View>
            <View className="item">
              <View className="label">审核操作</View>
              <View className="value">{ detail.status == 1 ? '审核通过' : '审核不通过'}</View>
            </View>
            <View className="item">
              <View className="label">审核意见</View>
              <View className="value">{ detail.remark || '--'}</View>
            </View>
          </View>
        }

        {
          detail.status === '0' && (
            <View>
              <View className="border"></View>
              <DCheckOpinion opinions={opinions} onCancel={() => Taro.navigateBack()} onConfirm={this.onConfirm} />
            </View>
          )
        }
      </View>
    )
  }
}